<template>
  <div>
    <a-form-model :model="TiktokForm" label-width="140px" a-form-name="TiktokForm" classref="TiktokRef" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" layout="horizontal">
      <a-form-model-item :label="item.label" :prop="item.prop" v-for="(item, index) in TiktokFormList" :key="index">
        <a-switch
          v-if="item.el === 'Switch'"
          :checked="TiktokForm[item.prop] == 1 ? true : false"
          @change="(value) => SwitchChange(value, item.prop)"
          :checked-children="item.openTips"
          :un-checked-children="item.closeTips"
          style="width: 70px;"
        />
        <a-input-number v-else-if="item.el === 'InputNumber'" v-model="TiktokForm[item.prop]" :min="1" :precision="0" style="width: 240px;" :step="1" />

        <a-select v-else-if="item.el === 'Select'" v-model="TiktokForm[item.prop]" style="width: 120px">
          <a-select-option :value="item" v-for="(item, index) in item.option" :key="index">
            {{ item }}
          </a-select-option>
        </a-select>

        <div v-else-if="item.el === 'unavailableDates'">
          <div style="display: flex;">
            <div>
              <div style="display: flex;align-items: center;">
                <a-checkbox v-model="dateShow">按日期 </a-checkbox>
                <a-button type="primary" size="small" v-if="dateShow && dateList.length === 0" style="margin:0 12px;" @click="addDate"> 添加 </a-button>
              </div>
            </div>
            <div v-if="dateShow">
              <div>
                <div style="display: flex;align-items: center;" v-for="(item, index) in dateList" :key="index">
                  <a-date-picker valueFormat="YYYY-MM-DD" v-model="dateList[index]" :disabled-date="disabledDate" />
                  <div>
                    <a-button type="primary" size="small" style="margin:0 12px;" @click="addDate"> 添加 </a-button>
                    <a-button type="danger" size="small" @click="delDate(index)" v-if="index !== 0"> 删除 </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="display:flex;align-items: center;">
            <a-checkbox v-model="weekShow">按每周 </a-checkbox>
          </div>
          <div class="week-box" v-if="weekShow">
            <div v-for="week in weekList" :key="week.value">
              <div class="week-item" @click="week.isChecked = !week.isChecked" :class="week.isChecked ? 'checked' : ''">
                {{ week.label }}
              </div>
            </div>
          </div>
        </div>

        <div v-else-if="item.el === 'timeRangePicker'">
          <div class="time-list" v-for="(time, index) in TiktokForm.businessHours" :key="index">
            <timeRangePicker v-model="TiktokForm.businessHours[index]" />
            <div class="icon-box">
              <div class="icon-plus" @click="timeRangePickerPlus">
                <a-icon type="plus" />
              </div>
              <div class="icon-minus" v-if="index !== 0" @click="timeRangePickerMinus(index)">
                <a-icon type="minus" />
              </div>
            </div>
          </div>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import moment from 'moment'
import timeRangePicker from './timeRangePicker'

// 餐饮类
const foodClass = [
  {
    label: '外带美食',
    el: 'Switch',
    prop: 'canBringFoods',
    openTips: '支持',
    closeTips: '不支持'
  },
  {
    label: '打包',
    el: 'Switch',
    prop: 'canPackagedFood',
    openTips: '支持',
    closeTips: '不支持'
  },
  {
    label: '使用包间',
    el: 'Switch',
    prop: 'canUsePrivateRoom',
    openTips: '支持',
    closeTips: '不支持'
  },
  {
    label: '享受店内其他优惠',
    el: 'Switch',
    prop: 'canUseOtherDiscount',
    openTips: '支持',
    closeTips: '不支持'
  },
  {
    label: '建议使用人数',
    el: 'InputNumber',
    prop: 'recommendedUsersNumber',
    placeholder: '请输入'
  },
  {
    label: '最多使用人数',
    el: 'InputNumber',
    prop: 'maxUsersNumber',
    placeholder: '请输入'
  }
]
// 游乐票务类 amusements
const amusementsClass = [
  {
    label: '是否需要取票',
    el: 'Switch',
    prop: 'needCheckin',
    openTips: '是',
    closeTips: '否'
  },
  {
    label: '是否包含保险',
    el: 'Switch',
    prop: 'containsInsurance',
    openTips: '包含',
    closeTips: '不包含'
  },
  {
    label: '节假日是否额外收费',
    el: 'Switch',
    prop: 'holidayAdditionalCharge',
    openTips: '是',
    closeTips: '否'
  },
  {
    label: '适用人群',
    el: 'Select',
    prop: 'suitableGroup',
    openTips: '是',
    closeTips: '否',
    option: ['成人', '儿童', '老年', '学生', '特殊人群', '男士', '女士', '1大1小', '2大1小', '团体', '情侣', '通用人群', '其他人群']
  }
]
// 丽人类 beauty
const beautyClass = [
  {
    label: '性别',
    el: 'Switch',
    prop: 'restrictedGender',
    openTips: '限制',
    closeTips: '不限制'
  },
  {
    label: '长短发',
    el: 'Switch',
    prop: 'restrictedHair',
    openTips: '限制',
    closeTips: '不限制'
  },
  {
    label: '商家原会员体验',
    el: 'Switch',
    prop: 'restrictedOriginMember',
    openTips: '限制',
    closeTips: '不限制'
  }
]

const otherClass = [
  {
    label: '营业使用时段',
    el: 'timeRangePicker',
    prop: 'businessHours',
    openTips: '是',
    closeTips: '否'
  },
  {
    label: '不可用日期(选填)',
    el: 'unavailableDates',
    prop: 'unavailableDates',
    openTips: '是',
    closeTips: '否'
  }
]
const TiktokItem = [...foodClass, ...amusementsClass, ...beautyClass, ...otherClass]
const weekList = [
  {
    label: '周一',
    isChecked: false,
    value: 1
  },
  {
    label: '周二',
    isChecked: false,
    value: 2
  },
  {
    label: '周三',
    isChecked: false,
    value: 3
  },
  {
    label: '周四',
    isChecked: false,
    value: 4
  },
  {
    label: '周五',
    isChecked: false,
    value: 5
  },
  {
    label: '周六',
    isChecked: false,
    value: 6
  },
  {
    label: '周日',
    isChecked: false,
    value: 7
  }
]
export default {
  name: 'TiktokForm',
  components: {
    timeRangePicker
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      TiktokItem,
      weekList,
      TiktokForm: {},
      weekShow: false,
      dateShow: false,
      dateList: [],
      TiktokFormList: []
    }
  },

  methods: {
    SwitchChange(value, key) {
      this.TiktokForm[key] = value ? 1 : 0
    },
    disabledDate(current) {
      let arr = this.dateList
      let a = current && current < moment().subtract(1, 'days')
      arr.forEach((item) => {
        a = a || (current > moment(`${item} 00:00:00`) && current < moment(`${item} 23:59:59`))
      })
      return a
    },
    timeRangePickerPlus() {
      this.TiktokForm.businessHours.push(['', ''])
    },
    timeRangePickerMinus(index) {
      this.TiktokForm.businessHours.splice(index, 1)
    },
    addDate() {
      this.dateList.push(null)
    },
    delDate(index) {
      this.dateList.splice(index, 1)
    },
    getValue() {
      let obj = this.TiktokForm
      console.log(obj)
      if (this.dateShow && this.dateList.length) {
        let dateListCopy = this.dateList.filter((item) => !item)
        if (dateListCopy.length) {
          this.$messageSend.error('请将日期填写完整')
          return false
        }
        if (new Set(this.dateList).size !== this.dateList.length) {
          this.$messageSend.error('日期重复,请重新输入')
          return false
        }
        obj.unavailableDates.unavailableDays = this.dateList
      } else {
        if (obj.hasOwnProperty('unavailableDates') && obj.unavailableDates.hasOwnProperty('unavailableDays')) {
          obj.unavailableDates.unavailableDays = []
        }
      }
      if (this.weekShow) {
        obj.unavailableDates.weekdays = this.weekList
          .map((item) => {
            if (item.isChecked) {
              return item.value
            }
          })
          .filter(Boolean)
      } else {
        if (obj.hasOwnProperty('unavailableDates') && obj.unavailableDates.hasOwnProperty('weekdays')) {
          obj.unavailableDates.weekdays = []
        }
      }
      if (obj.hasOwnProperty('businessHours')) {
        let arr = obj.businessHours
          .map((item) => {
            if (!item[0] || !item[1]) {
              return false
            }
            return item
          })
          .filter(Boolean)
        if (arr.length < obj.businessHours.length) {
          this.$messageSend.error('营业时间段未填写完成')
          return false
        }
      }
      return obj
    },
    initData() {
      // 初始化
      const { TiktokItem, form } = this
      if (!this.form) {
        return []
      }
      let keys = Object.keys(form)
      this.TiktokFormList = TiktokItem.map((item) => {
        // 抖音规则 初始化显示那些规则
        if (keys.includes(item.prop)) {
          let arr = []
          if (item.prop === 'businessHours') {
            if (!form.businessHours) {
              arr = [['', '']]
            } else {
              arr = form.businessHours.split(',')
              arr = arr.map((item) => {
                item = item.split('-')
                return item
              })
            }
            this.$set(this.TiktokForm, item.prop, arr)
          } else {
            this.$set(this.TiktokForm, item.prop, form[item.prop])
          }
          if (item.prop === 'unavailableDates') {
            // 不可用时间初始化
            if (form.unavailableDates.hasOwnProperty('unavailableDays') && form.unavailableDates.unavailableDays.length) {
              // 按日期
              this.dateShow = true
              this.dateList = form.unavailableDates.unavailableDays
            }
            if (form.unavailableDates.hasOwnProperty('weekdays')) {
              if (form.unavailableDates.weekdays.length) {
                this.weekShow = true
              } else {
                this.weekShow = false
              }
              // 每周日期选中  -  不选中
              this.weekList.map((item) => {
                if (form.unavailableDates.weekdays.includes(item.value)) {
                  item.isChecked = true
                } else {
                  item.isChecked = false
                }
              })
            }
          }
          return item
        }
      }).filter(Boolean)
    }
  },

  watch: {
    form: {
      handler: function(value) {
        this.initData()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.week-box {
  display: flex;
  margin: 20px 0;
  .week-item {
    cursor: pointer;
    width: 60px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin-right: 12px;
    &.checked {
      border: 1px solid #1d6fe9;
      background: #1d6fe9;
      color: #fff;
    }
  }
}
.time-list {
  display: flex;
  align-items: center;
  .icon-box {
    font-size: 24px;
    color: #1d6fe9;
    display: flex;

    .icon-plus {
      margin: 0px 12px;
    }
  }
}
</style>
